<template>
  <div class="app-container">
    <div class="top">
    <el-button type="primary" size="mini" class="el-icon-plus add" @click="add">新增</el-button>
    </div>
    <el-table :data="data" style="width: 100%">
      <el-table-column prop="prop" label="防治日期" width="width" align="center">
      </el-table-column>
      <el-table-column prop="prop" label="疾病名称" width="width" align="center">
      </el-table-column>
      <el-table-column prop="prop" label="猪只类型" width="width" align="center">
      </el-table-column>
      <el-table-column prop="prop" label="数量" width="width" align="center">
      </el-table-column>
      <el-table-column prop="prop" label="药品明细" width="width" align="center">
      </el-table-column>
      <el-table-column prop="prop" label="症状" width="width" align="center">
      </el-table-column>
      <el-table-column prop="prop" label="操作人员" width="width" align="center">
      </el-table-column>
      <!-- 无数据 -->
      <template slot="empty">
        <div class="noData">
          <!--  v-show="data.length===0" -->
          <img src="@/assets/images/noData.png" />
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
    <Pagination :total="total"></Pagination>
    <Dialog
    :title="'新增防治记录'"
      :isShowRole="showRole"
      width="815px"
      @closeDialog="closeDialog"
      @confirmDialog="confirmDialog"
    >
      <DialogTbale title="选择药品" :tableData="tableData"></DialogTbale>
    </Dialog>
  </div>
</template>

<script>
import DialogTbale from "./components/DialogTbale";
export default {
  components:{DialogTbale},
  data() {
    return {
      total:100,
      showRole:false,
      tableData:[]
    }
  },
  methods:{
    add(){
      this.showRole = true
    },
    closeDialog(){
      this.showRole = false
      this.tableData = []
    },
    confirmDialog(){
      this.showRole = false
      this.tableData = []
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
